<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加/修改页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="add">
            <div class="header">
                <span>{{(action == 'Add'?'添加':'查看')}}销售价格单</span>
            </div>
            <div class="main" style="padding: 0 15px;">
                <!-- 配置属性, 目前仅支持 单主表 多子表 结构 -->
                <div id="form"
                    :data-options="JSON.stringify({'tableName':'sales_unitprice','formName':'dataForm' ,'primaryKey':'Sales_Unit_Price_SerialNumber'})">
                    <div
                        :data-options="JSON.stringify({'tableName':'sales_unitprice_detail','formName':'childDataForm' ,'parentTableName':'sales_unitprice'})">
                    </div>
                    <div
                        :data-options="JSON.stringify({'tableName':'sales_unitprice_merchant','formName':'childDataForm1' ,'parentTableName':'sales_unitprice'})">
                    </div>
                </div>
                <div class="table_titel">
                    <div class="titel">生效日期</div>
                </div>
                <el-form :model="dataForm" ref="form" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="2" size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">开始时间</div>
                            </template>
                            <el-form-item prop="Start_Date"
                                :rules="[{ required: true, message: '请选择开始时间', trigger: 'change' }]">
                                <el-date-picker :disabled="action == 'Modify'" @change="handleDate($event, 'Start_Date')"
                                    v-model.trim="dataForm.Start_Date" format="yyyy-MM-dd" style="width: 100%;"
                                    value-format="yyyy-MM-dd" type="date" placeholder="请选择开始日期"
                                    size="large"></el-date-picker>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">结束日期</div>
                            </template>
                            <el-form-item prop="End_Date">
                                <el-date-picker :disabled="action == 'Modify'" @change="handleDate($event, 'End_Date')"
                                    v-model.trim="dataForm.End_Date" format="yyyy-MM-dd" style="width: 100%;"
                                    value-format="yyyy-MM-dd" type="date" placeholder="可选择结束日期"
                                    size="large"></el-date-picker>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
                <div class="table_titel">
                    <div class="titel">价格明细</div>
                    <div class="operation">
                        <el-button type="primary" size="small" @click="handleAdd1('childDataForm')">新增</el-button>
                        <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
                    </div>
                </div>
                <el-form :model="{childDataForm:childDataForm.filter(i=>i.Row_Status != '1')}" ref="form1"
                    :inline-message="true" style="width: 100%">
                    <el-descriptions v-for="(item, index) in childDataForm.filter(i=>i.Row_Status != '1')" :column="3"
                        size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">商品</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Article_SerialNumber`"
                                :rules="[{ required: true, message: '请选择开始时间', trigger: 'change' }]">
                                <el-select :disabled="action == 'Modify'" @change="handleChange($event, item)" v-model.trim="item.Article_SerialNumber"
                                    placeholder="请选择商品" style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in article_info" :key="index"
                                        :label="item.Article_Name" :value="item.Article_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">规格</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Specifications_SerialNumber`"
                                :rules="[{ required: true, message: '请选择规格', trigger: 'change' }]">
                                <el-select @change="handlePrice($event, item)"
                                    :disabled="item.article_specifications.length == 0 || action == 'Modify'"
                                    v-model.trim="item.Specifications_SerialNumber" placeholder="请选择规格"
                                    style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in item.article_specifications || []" :key="index"
                                        :label="item.Specifications_Name" :value="item.Specifications_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item">销售单价</div>
                            </template>
                            <el-form-item :prop="`childDataForm.${index}.Unit_Price`">
                                <el-input :disabled="action == 'Modify'" type="number" v-model.trim="item.Unit_Price" placeholder="请输入销售单价"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
                <div class="table_titel">
                    <div class="titel">适用店铺</div>
                    <div class="operation">
                        <el-button type="primary" size="small" @click="handleAdd('childDataForm1')">新增</el-button>
                        <el-button type="danger" size="small" @click="handleRemove('childDataForm1')">删除</el-button>
                    </div>
                </div>
                <el-form :model="{childDataForm1:childDataForm1.filter(i=>i.Row_Status != '1')}" ref="form2"
                    :inline-message="true" style="width: 100%">
                    <el-descriptions v-for="(item, index) in childDataForm1.filter(i=>i.Row_Status != '1')" :column="1"
                        size="large" border>
                        <el-descriptions-item>
                            <template slot="label">
                                <div class="cell-item required">适用店铺</div>
                            </template>
                            <el-form-item :prop="`childDataForm1.${index}.Merchant_SerialNumber`"
                                :rules="[{ required: true, message: '请选择适用店铺', trigger: 'change' }]">
                                <el-select :disabled="action == 'Modify'" v-model.trim="item.Merchant_SerialNumber" placeholder="请选择适用店铺"
                                    style="width: 100%;" clearable filterable>
                                    <el-option v-for="(item,index) in merchant_(index)" :key="index"
                                        :label="item.Merchant_Name" :value="item.Merchant_SerialNumber" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
            </div>
            <div class="footer">
                <el-button size="medium" @click="handleBack">返回</el-button>
                <el-button size="medium" v-if="action == 'Add'" type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/add.js"></script>
</body>

</html>